import { memo, RefObject } from "react";
import { Form, Input, Button, DatePicker } from "antd-mobile";
import dayjs from "dayjs";
import type { DatePickerRef } from "antd-mobile/es/components/date-picker";
import styles from "./mine.module.scss";
let Mine: React.FC = () => {
  return (
    <>
      <div className={styles.from}>
        <Form
          layout="horizontal"
          footer={
            <Button block type="submit" color="primary" size="large">
              登录
            </Button>
          }>
          <Form.Item
            name="birthday"
            label="国家/地区"
            trigger="onConfirm"
            onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
              datePickerRef.current?.open();
            }}>
            <DatePicker>
              {(value) => (value ? dayjs(value).format("YYYY-MM-DD") : "选择地区")}
            </DatePicker>
          </Form.Item>
          <Form.Item rules={[{ required: true, message: "手机号不能为空" }]}>
            <Input placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item extra={<a>发送验证码</a>}>
            <Input placeholder="请输入手机号验证码" />
          </Form.Item>
        </Form>
      </div>
    </>
  );
};
export default memo(Mine);
